<template>
  <section class="myData">

    <div class="myCenter-main">

      <div class="contentDiv">
        <div class="yonghu_box">
          <div class="head">
            <img src="../../assets/yonghuxinxi.svg" />
            <span>基本信息</span>
          </div>
          <div class="content">
            <div class="rowData">
              <div class="left">
                <div class="key">手机号码</div>
                <div class="value">{{content.mobile}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">姓名</div>
                <div class="value">{{content.name}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">昵称</div>

                <div class="value">
                  {{content.nickName}}
                </div>

              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">性别</div>
                <div class="value">{{content.sexLabel}}</div>
              </div>

            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">年龄</div>
                <div class="value">{{content.age}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">身份证号</div>
                <div class="value">{{content.idCard}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">邮箱</div>
                <div class="value">{{content.email}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">地址</div>
                <div class="value">{{content.address}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="yonghu_box">
          <div class="head">
            <img src="../../assets/yonghuxinxi.svg" />
            <span>单位信息</span>
          </div>
          <div class="content">
            <div class="rowData">
              <div class="left">
                <div class="key">纳税识别号</div>
                <div class="value">{{content.licenseNo}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">个人职级</div>
                <div class="value">{{content.personalRank}}</div>
              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">单位名称</div>

                <div class="value">
                  {{content.companyName}}
                </div>

              </div>
            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">岗位名称</div>
                <div class="value">{{content.jobName}}</div>
              </div>

            </div>
            <div class="rowData">
              <div class="left">
                <div class="key">部门名称</div>
                <div class="value">{{content.officeName}}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="tuxiang_box">
        <div class="head">
          <img src="../../assets/yonghuxinxi.svg" />
          <span>图像信息</span>
        </div>
        <div class="content">
          <div class="headimg">
<!--            <div class="img">
              <div>
                <img :src="$axios.defaults.baseURL+content.photo">
                <div>头像</div>
              </div>
            </div> -->

            <div class="img">

              <div v-if="content.face">
                <img :src="$axios.defaults.baseURL+content.face">
                <div>人脸图片（用于人脸识别认证）</div>
              </div>
              <div v-if="!content.face">暂无人脸信息</div>
            </div>

            <div class="img">

              <div v-if="content.idCardPhoto1">
                <img :src="$axios.defaults.baseURL+content.idCardPhoto1">
                <div>身份证照片</div>
              </div>
              <div v-if="!content.idCardPhoto1">暂无身份证信息</div>
            </div>

          </div>
        </div>
      </div>
      <div class="sub">
        <div class="button" style="margin-right:20px;" @click="goPage('/edit_data')">修改资料</div>
        <div class="button" @click="goPage('/password')">修改密码</div>
      </div>
    </div>


  </section>
</template>

<script>
  import $ from 'jquery'
  import {
    Notification
  } from 'element-ui';
  export default {
    components: {},
    data() {
      return {
        loading: false,
        muluList1: [],
        pageNo: 1,
        activeName: 'first',
        total: null,
        content: {
          mobile: '',
          name: '',
          nickName: '',
          sex: '',
          sexLabel: '',
          email: '',
          address: '重庆市渝北区光电园',
          age: '',
          ji: '15B',
          company: '辰盛科技有限公司',
          post: '前端开发工程师',
          department: '开发部',
          no: 'AKKS856262365',
          licenseNo: '',
          personalRank: '',
          companyName: '',
          jobName: '',
          officeName: ''
        },
        muluList1: [

        ],
      }
    },
    computed: {

    },
    head() {
      return {
        title: '个人资料',
        meta: [{
            hid: 'description',
            name: 'description',
            ccontent: '网校，黄山网校，在线学习，在线教育'
          },
          {
            hid: 'keywords',
            name: 'keywords',
            content: '网校，黄山网校，在线学习，在线教育'
          },
        ]
      }
    },
    created() {
      this.getData();
    },
    mounted() {

    },
    methods: {
      handleClick() {

      },
      pageChange() {

      },
      goPage(path) {
        this.$router.push(path);
      },
      getData() {
        let that = this;
        this.loading = true;
        this.$axios.$post("/f/userDetail")
          .then(function(response) {
            let data = response.data;
            let str = "";
            if (data.area1.areaCode != "" && data.area1.areaCode) {
              str += data.area1.areaName;
            }
            if (data.area2.areaCode != "" && data.area2.areaCode) {
              str += data.area2.areaName;
            }
            if (data.area3.areaCode != "" && data.area3.areaCode) {
              str += data.area3.areaName;
            }
            if (data.area4.areaCode != "" && data.area4.areaCode) {
              str += data.area4.areaName;
            }
            if(data.area5){
              data.address = str + data.area5;
            }else{
              data.address = str;
            }
            that.content = data;
            that.content.idCard = that.content.property1.idCard;
            that.content.idCardPhoto1 = that.content.property1.idCardPhoto1;
            that.loading = false;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
    }
  }
</script>
<style lang="less">
  .myData {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .main-title1 {
      line-height: 20px;
      padding-left: 10px;
      margin-left: 40px;
      border-left: 4px solid #17a2b8;
      font-size: 16px;
      color: #17a2b8;
      font-weight: 500;
      // width: 90%;
      margin-top: 20px;
      float: left;
    }

    .myCenter-main {
      width: 100%;
      padding: 25px;
      box-sizing: border-box;
      .tuxiang_box {
        width: 100%;
        height: 300px;
        background-color: white ;
        border: 1px solid #e8edf6;
        margin-bottom: 20px;

        // margin-right: 50px;
        .head {
          display: flex;
          align-items: center;
          width: 100%;
          height: 56px;
          background-color: #effaff;
          padding: 0 10px;
          color: #101010;

          img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
          }

          span {
            color: #101010;
            font-size: 14px;
          }
        }

        .content {
          width: 100%;
          height: calc(100% - 60px);
          display: flex;
          flex-direction: column;
          // justify-content: space-evenly;
          justify-content: space-between;

          &:before,
          &:after {
            content: '';
            display: block;
          }

          padding: 0 20px 0px 10px;
          font-size: 14px;
          .headimg {
            // width: 130px !important;
            // height: 130px !important;
            display: block;
            border-radius: 50%;
            margin: 40px;
            display: flex;
            // justify-content: center;
            justify-content: flex-start;
            // justify-content: space-around;
            .img {
              display: flex;
              justify-content: space-around;
              margin-right: 100px;
              align-items: center;
              div {
                // line-height: 130px;
                // height: 130px;
                text-align: center;
                font-size: 16px;

              }

              img {
                width: 130px;
                height: 130px;
              }
            }
          }
        }
      }


      .contentDiv {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .yonghu_box {
          width: 48%;
          height: 300px;
          background-color: white ;
          border: 1px solid #e8edf6;
          margin-bottom: 20px;

          // margin-right: 50px;
          .head {
            display: flex;
            align-items: center;
            width: 100%;
            height: 56px;
            background-color: #effaff;
            padding: 0 10px;
            color: #101010;

            img {
              width: 24px;
              height: 24px;
              margin-right: 5px;
            }

            span {
              color: #101010;
              font-size: 14px;
            }
          }

          .content {
            width: 100%;
            height: calc(100% - 60px);
            display: flex;
            flex-direction: column;
            // justify-content: space-evenly;
            justify-content: space-between;

            &:before,
            &:after {
              content: '';
              display: block;
            }

            padding: 0 20px 0px 10px;
            font-size: 14px;

            .rowData {
              width: 100%;
              display: flex;
              justify-content: space-between;

              .left {
                display: flex;

                .set {
                  color: #0000D0;
                  text-decoration: underline;
                  cursor: pointer;
                }

                .key {
                  width: 80px;
                  color: #b8b4b1;
                  // margin-right: 20px;
                }

                .value {
                  display: flex;

                  .shengji {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    color: #f56c6c;

                    img {
                      width: 17px;
                      height: 17px;
                    }
                  }
                }
              }

              .right {
                .set {
                  color: #0000D0;
                  text-decoration: underline;
                  cursor: pointer;
                }
              }


            }
          }
        }
        .itemList {
          width: 45%;
          display: flex;

          .item {
            // width: 350px;
            // height: 350px;
            float: left;
            margin-right: 20px;

            .data-main {
              padding: 0 45px;
              margin-top: 80px;
              // margin-bottom: 40px;
              // float: left;

              .data {
                height: 30px;
                line-height: 30px;
                margin-top: 20px;
                font-size: 16px;
                color: #444444;

                .name {
                  display: block;
                  float: left;
                  // width: 120px;
                  text-align: right;
                  margin-right: 20px;
                }
              }
            }
          }
        }
      }

      .sub {
        width: 100%;
        height: 40px;
        display: flex;
        margin-top: 10px;
        justify-content: center;

        .button {
          width: 160px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          background: #0068b7;
          color: #ffffff;
          // margin-top: 50px;
          // float: left;
          cursor: pointer;
        }
      }

    }

  }
</style>
